<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script src="vue_dev.js"></script>
	<script src="axios.min.js"></script>
	<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
	
	<div id="app">
		<!-- 将用户信息显示在文本框里 -->
		<div v-for="item in info">
			<input type="hidden" id="id" v-bind:value="item.id">
			姓名：<input  type="text" id="name" v-bind:value="item.name">
			性别：<input  type="text" id="sex" v-bind:value="item.sex">
			年龄：<input  type="text" id="age" v-bind:value="item.age">
		</div>
		<input type="submit" value="更新" v-on:click="update()"><!-- 当这个按钮点击时，调用update函数 -->
	</div>
	<script>
		//获取url参数
		function getUrlParam (name) {  
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
			var r = window.location.search.substr(1).match(reg);  
			if (r != null){
				return unescape(r[2]); 
			}
			return null; 
		}
	</script>
	<script>


		//获取传过来的id
		var id = getUrlParam('id');
		//新建一个Vue实例赋值给app
		var app = new Vue({
			//挂载元素
			el:"#app",
			//数据
			data(){
				return{
					info:null
				}
			},
			methods:{
				//更新函数，将文本框中的内容更新到数据库中
				update:function () {
					//获取本文本框的值
					var name = $("#name").val();
					var sex = $("#sex").val();
					var age = $("#age").val();
					//发送put请求
					axios
					.put('http://127.0.0.1/RESTful/user/'+id+'?name='+name+'&sex='+sex+"&age="+age)//请求目标
					.then(alert("更新成功"))
					.catch(error => {
						console.log(error)
					})
				}
			},
			mounted(){
				axios
				.get('http://127.0.0.1/RESTful/user/'+id)//根据id获取该用户信息
				.then(response=>(this.info = response.data))//将获取到的信息给info
				.catch(error => {
					console.log(error)
				})
			}
		})
	</script>
</body>
</html>